<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>DDNS4J</title>
</head>
<!-- 引入样式 -->
<link rel="stylesheet" href="css/index.css">
<!--引入静态的路径-->
<script type="text/javascript" src="js/vue.min.js"></script>
<script type="text/javascript" src="js/index.js"></script>
<!-- 引入组件库 -->
<!--引入通信框架-->
<script type="text/javascript" src="js/axios.min.js"></script>
<body>
<div id="app">
    <el-container>
        <el-header class="header-container">
            <!-- 左侧部分 -->
            <div class="left-part">
                <a href="https://gitee.com/Xsssd/ddns4j"><img
                        src="https://gitee.com/static/images/logo-black.svg?t=158106664" class="wechat-img"></a>
            </div>
            <!-- 中间部分 -->
            <div class="center-part">DDNS4J</div>
            <!-- 右侧部分 -->
            <div class="right-part">
                <a href="https://ddns4j.sssd.top"><img src="https://blog-sssd.oss-cn-chengdu.aliyuncs.com/title.jpg"
                                                       class="wechat-img"></a>
            </div>
        </el-header>
        <el-container id="inner-content">
            <el-aside width="66.6%">
                <el-form :inline="true" :model="dataForm" @keyup.enter.native="getDataList()">
                    <el-form-item>
                        <el-input v-model="dataForm.domain" clearable="true" size="mini" placeholder="域名"
                                  clearable></el-input>
                    </el-form-item>
                    <el-form-item>
                        <el-select v-model="dataForm.serviceProvider" size="mini" placeholder="厂商" clearable="true">
                            <el-option
                                    v-for="item in dataForm.serviceOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                            >
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-select v-model="dataForm.recordType" size="mini" placeholder="记录类型" clearable="true">
                            <el-option
                                    v-for="item in dataForm.recordOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    clearable>
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-select v-model="dataForm.state" size="mini" placeholder="状态" clearable="true">
                            <el-option
                                    v-for="item in dataForm.stateOptions"
                                    :key="item.value"
                                    :label="item.label"
                                    :value="item.value"
                                    clearable>
                            </el-option>
                        </el-select>
                    </el-form-item>

                    <el-form-item>
                        <el-button size="mini" round @click="getDataList()">查询</el-button>
                        <el-button size="mini" round @click="addOrUpdateHandle()">新增</el-button>
                    </el-form-item>
                </el-form>
                <el-table
                        :data="dataList"
                        border
                        v-loading="dataListLoading"
                        @selection-change="selectionChangeHandle"
                        style="width: 100%;"
                        size="mini">
                    <el-table-column
                            type="index"
                            header-align="center"
                            align="center"
                            width="50">
                    </el-table-column>
                    <el-table-column
                            prop="serviceProviderName"
                            header-align="center"
                            align="center"
                            label="服务提供商">
                    </el-table-column>
                    <el-table-column
                            prop="recordTypeName"
                            header-align="center"
                            align="center"
                            label="解析类型">
                    </el-table-column>
                    </el-table-column>
                    <el-table-column
                            prop="ip"
                            header-align="center"
                            align="center"
                            label="真实的公网ip">
                    </el-table-column>
                    <el-table-column
                            prop="domain"
                            header-align="center"
                            align="center"
                            label="域名">
                    </el-table-column>
                    <el-table-column
                            prop="state"
                            header-align="center"
                            align="center"
                            label="状态">
                        <template slot-scope="scope">
                            <el-switch
                                    active-color="#13ce66"
                                    inactive-color="#ff4949"
                                    v-model="scope.row.state"
                                    :active-value="1"
                                    :inactive-value="0"
                                    @change="changeState(scope.row,scope.row.state,'state')">
                            </el-switch>
                        </template>
                    </el-table-column>
                    <el-table-column
                            prop="updateFrequency"
                            header-align="center"
                            align="center"
                            label="更新频率 单位:分钟">
                    </el-table-column>
                    <el-table-column
                            prop="createDate"
                            header-align="center"
                            align="center"
                            label="创建时间">
                    </el-table-column>
                    <el-table-column
                            prop="updateDate"
                            header-align="center"
                            align="center"
                            label="更新时间">
                    </el-table-column>
                    <el-table-column
                            fixed="right"
                            header-align="center"
                            align="center"
                            width="150"
                            label="操作">
                        <template slot-scope="scope">
                            <el-button size="mini" round @click="addOrUpdateHandle(scope.row.id)">修改</el-button>
                            <el-button size="mini" round @click="deleteHandle(scope.row.id)">删除</el-button>
                        </template>
                    </el-table-column>
                </el-table>
                <el-pagination
                        @size-change="sizeChangeHandle"
                        @current-change="currentChangeHandle"
                        :current-page="pageIndex"
                        :page-sizes="[5,10, 20, 50, 100]"
                        :page-size="pageSize"
                        :total="totalSize"
                        layout="total, sizes, prev, pager, next, jumper">
                </el-pagination>
                <el-dialog
                        :title="!addOrUpdateForm.id ? '新增' : '修改'"
                        :close-on-click-modal="false"
                        :visible.sync="visible"
                        width="20%">
                    <el-form :model="addOrUpdateForm" :rules="dataRule" ref="addOrUpdateForm" size="mini"
                             @keyup.enter.native="addOrUpdateFormSubmit()" label-width="140px">
                        <el-form-item label="服务提供商" prop="serviceProvider">
                            <el-select v-model="addOrUpdateForm.serviceProvider" size="mini" placeholder="服务提供商"
                                       clearable="true">
                                <el-option
                                        v-for="item in dataForm.serviceOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="serviceProviderId" prop="serviceProviderId" size="small">
                            <el-input v-model="addOrUpdateForm.serviceProviderId" size="small"
                                      placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="serviceProviderSecret" prop="serviceProviderSecret">
                            <el-input v-model="addOrUpdateForm.serviceProviderSecret" size="small"
                                      placeholder=""></el-input>
                        </el-form-item>
                        <el-form-item label="解析类型" prop="recordType">
                            <el-select v-model="addOrUpdateForm.recordType" size="mini" placeholder="记录类型"
                                       @change="handleChangeRecordType"
                                       clearable="true">
                                <el-option
                                        v-for="item in dataForm.recordOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        clearable>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="获取ip方式:" prop="getIpMode">
                            <el-select v-model="addOrUpdateForm.getIpMode" size="mini" placeholder="获取ip方式"
                                       @change="handleChangeIpMode"
                                       clearable="true">
                                <el-option
                                        v-for="item in getIpModeOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        :disabled="item.disabled"
                                        clearable>
                                </el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item >
                            <el-select v-model="networks" v-if="showNetworks" size="mini" placeholder="请选择具体的网卡及IP"
                                       clearable="true">
                                <el-option v-for="item in networkList" :key="item.value" :label="item.label"
                                           :value="item.value"></el-option>
                            </el-select>
                        </el-form-item>

                        <el-form-item label="interface" prop="getIpModeValue" hidden="true">
                            <el-input v-model="addOrUpdateForm.getIpModeValue" size="small"
                                      placeholder="interface"></el-input>
                        </el-form-item>
                        <el-form-item label="公网ip" prop="ip" hidden="true">
                            <el-input v-model="addOrUpdateForm.ip" size="small" placeholder="公网ip"></el-input>
                        </el-form-item>
                        <el-form-item label="域名" prop="domain">
                            <el-input v-model="addOrUpdateForm.domain" size="small" placeholder="域名"></el-input>
                        </el-form-item>
                        <el-form-item label="状态" prop="state">
                            <el-select v-model="addOrUpdateForm.state" size="mini" placeholder="状态" clearable="true">
                                <el-option
                                        v-for="item in stateOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                        :disabled=item.disabled>
                                </el-option>
                            </el-select>
                        </el-form-item>
                        <el-form-item label="更新频率" prop="updateFrequency">
                            <el-select v-model="addOrUpdateForm.updateFrequency" size="mini" placeholder="状态"
                                       clearable="true">
                                <el-option
                                        v-for="item in updateFrequencyOptions"
                                        :key="item.value"
                                        :label="item.label"
                                        :value="item.value"
                                >
                                </el-option>
                            </el-select>
                        </el-form-item>
                    </el-form>
                    <span slot="footer" class="dialog-footer">
                    <el-button size="mini" round @click="visible = false">取消</el-button>
                    <el-button size="mini" round @click="addOrUpdateFormSubmit()">确定</el-button>
                    </span>
                </el-dialog>
            </el-aside>
            <el-main>
                <div class="console">
                    <div class="output" v-for="(log, index) in logs" :key="index">
                        <span class="timestamp">{{ getTimeStamp() }}</span>
                        <span class="message">{{ log }}</span>
                    </div>
                </div>
            </el-main>
        </el-container>
    </el-container>
</div>
</body>
<script>
    let vm = new Vue({
        el: '#app',
        data() {
            return {
                dataForm: {
                    domain: null,
                    serviceProvider: null,
                    state: null,
                    recordType: null,
                    serviceOptions: [
                        {
                            value: 1,
                            label: '阿里云'
                        },
                        {
                            value: 2,
                            label: '腾讯云'
                        },
                        {
                            value: 3,
                            label: 'cloudflare'
                        }
                    ],
                    recordOptions: [
                        {
                            value: 1,
                            label: 'AAAA'
                        },
                        {
                            value: 2,
                            label: 'A'
                        }
                    ],
                    stateOptions: [
                        {
                            value: 1,
                            label: '开启'
                        }, {
                            value: 0,
                            label: '关闭',
                            disabled: false
                        }
                    ]
                },
                dataList: [],
                pageIndex: 1,
                pageSize: 10,
                totalSize: 0,
                dataListLoading: false,
                dataListSelections: [],
                addOrUpdateVisible: false,
                visible: false,
                getIpModeOptions: [
                    {
                        value: 1,
                        label: 'interface'
                    },
                    {
                        value: 2,
                        label: 'network'
                    },
                    {
                        value: 3,
                        label: 'shell',
                        disabled: true
                    }
                ],
                updateFrequencyOptions: [
                    {
                        value: 1,
                        label: '1分钟'
                    },
                    {
                        value: 2,
                        label: '2分钟'
                    },
                    {
                        value: 5,
                        label: '5分钟'
                    },
                    {
                        value: 10,
                        label: '10分钟'
                    }
                ],
                addOrUpdateForm: {
                    id: 0,
                    serviceProvider: '',
                    serviceProviderId: '',
                    serviceProviderSecret: '',
                    recordType: '',
                    getIpMode: '',
                    getIpModeValue: '',
                    ip: '',
                    domain: '',
                    state: '',
                    updateFrequency: ''
                },
                dataRule: {
                    serviceProvider: [
                        {required: true, message: '服务提供商1 阿里云 2 腾讯云 3 cloudflare不能为空', trigger: 'blur'}
                    ],
                    serviceProviderId: [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ],
                    serviceProviderSecret: [
                        {required: true, message: '不能为空', trigger: 'blur'}
                    ],
                    recordType: [
                        {required: true, message: '解析类型:1 AAAA 2 A不能为空', trigger: 'blur'}
                    ],
                    getIpMode: [
                        {required: true, message: '获取ip方式: 1 interface 2 network 3 cmd不能为空', trigger: 'blur'}
                    ],
                    domain: [
                        {required: true, message: '域名不能为空', trigger: 'blur'}
                    ],
                    state: [
                        {required: true, message: '1 启用 0 禁用不能为空', trigger: 'blur'}
                    ],
                    updateFrequency: [
                        {required: true, message: '更新频率不能为空', trigger: 'blur'}
                    ]
                },
                socket: null,
                logs: [],
                networks: '',
                showNetworks: false,
                networkList: []
            }
        },
        computed: {
            stateOptions() {
                const isDisabled = this.addOrUpdateForm.id === 0;
                return [
                    {
                        value: 1,
                        label: '开启'
                    },
                    {
                        value: 0,
                        label: '关闭',
                        disabled: isDisabled
                    }
                ];
            }
        },
        created() {
            this.getDataList()
        },
        beforeDestroy() {
            // 关闭 WebSocket 连接
            this.socket.close();
        },
        mounted() {
            this.socket = new WebSocket('ws://127.0.0.1:10000/logs');
            this.socket.onmessage = this.handleMessage;
        },
        methods: {
            handleChangeIpMode() {
                if (this.addOrUpdateForm.getIpMode === 2) {
                    let recordType = this.addOrUpdateForm.recordType;

                    if (recordType == undefined || recordType == null || recordType == '') {
                        alert("请先选择解析类型");
                        this.addOrUpdateForm.getIpMode = null;
                        return;
                    }

                    axios({
                        method: 'get',
                        url: `/parsingRecord/network/${recordType}`
                    }).then((response) => {
                        if (response && response.data.code === 200) {
                            this.networkList = response.data.data;
                            this.showNetworks = true;

                        } else {
                            alert("获取网卡信息失败");
                            return;
                        }
                    });


                } else {
                    this.showNetworks = false;
                    this.networkList = [];
                    this.networks = '';
                }
            },
            handleChangeRecordType() {

                if (this.showNetworks == false || this.addOrUpdateForm.getIpMode != 2) {
                    return;
                } else {
                    this.networkList = [];
                    this.networks = '';
                    let recordType = this.addOrUpdateForm.recordType;
                    axios({
                        method: 'get',
                        url: `/parsingRecord/network/${recordType}`
                    }).then((response) => {
                        if (response && response.data.code === 200) {
                            this.networkList = response.data.data;
                            this.showNetworks = true;

                        } else {
                            alert("获取网卡信息失败");
                            return;
                        }
                    });
                }
            },
            getTimeStamp() {
                const date = new Date();
                const year = date.getFullYear();
                const month = (date.getMonth() + 1).toString().padStart(2, '0');
                const day = date.getDate().toString().padStart(2, '0');
                const hour = date.getHours().toString().padStart(2, '0');
                const minute = date.getMinutes().toString().padStart(2, '0');
                const second = date.getSeconds().toString().padStart(2, '0');
                const formattedTime = `${year}-${month}-${day} ${hour}:${minute}:${second}`; /* 修改格式 */
                return formattedTime;
            },
            handleMessage(event) {
                this.logs.push(event.data);
            },
            // 获取数据列表
            getDataList() {
                this.dataListLoading = true
                axios({
                    method: 'post',
                    url: '/parsingRecord/page',
                    data: {
                        page: this.pageIndex,
                        pageSize: this.pageSize,
                        state: this.dataForm.state,
                        serviceProvider: this.dataForm.serviceProvider,
                        recordType: this.dataForm.recordType,
                        domain: this.dataForm.domain
                    }
                }).then((response) => {
                    if (response && response.data.code === 200) {
                        this.dataList = response.data.data.data
                        this.totalSize = response.data.data.totalRecords
                    } else {
                        this.dataList = []
                        this.totalSize = 0
                    }
                    this.dataListLoading = false
                });
            },
            //状态开关
            changeState(row, rowState) {
                this.dataListLoading = true
                axios({
                    method: 'post',
                    url: '/parsingRecord/modify',
                    data: row
                }).then((response) => {
                    if (response && response.data.code === 200) {
                        this.$message({
                            message: '更新成功',
                            type: 'success',
                            duration: 1500,
                            onClose: () => {
                                this.getDataList()
                            }
                        })
                    } else {
                        this.$message({
                            message: response.data.data,
                            type: 'error',
                            duration: 1500,
                            onClose: () => {
                                this.getDataList()
                            }
                        })
                    }
                    this.dataListLoading = false
                });
            },
            // 每页数
            sizeChangeHandle(val) {
                this.pageSize = val
                this.pageIndex = 1
                this.getDataList()
            },
            // 当前页
            currentChangeHandle(val) {
                this.pageIndex = val
                this.getDataList()
            },
            // 多选
            selectionChangeHandle(val) {
                this.dataListSelections = val
            },
            // 新增 / 修改
            addOrUpdateHandle(id) {
                this.addOrUpdateVisible = true
                this.$nextTick(() => {
                    this.init(id)
                })
            },
            // 删除
            deleteHandle(id) {
                var ids = id ? [id] : this.dataListSelections.map(item => {
                    return item.id
                })
                this.$confirm(`确定对[id=${ids.join(',')}]进行[${id ? '删除' : '批量删除'}]操作?`, '提示', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    this.dataListLoading = true
                    axios({
                        method: 'delete',
                        url: `/parsingRecord/delete/${id}`
                    }).then((response) => {
                        if (response && response.data.code === 200) {
                            this.$message({
                                message: '删除成功',
                                type: 'success',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        } else {
                            this.$message({
                                message: response.data.data,
                                type: 'error',
                                duration: 1500,
                                onClose: () => {
                                    this.getDataList()
                                }
                            })
                        }
                        this.dataListLoading = false
                    });
                })
            },
            init(id) {
                this.addOrUpdateForm.id = id || 0
                this.visible = true
                this.$nextTick(() => {
                    this.$refs['addOrUpdateForm'].resetFields()
                    if (this.addOrUpdateForm.id) {
                        this.dataListLoading = true
                        axios({
                            method: 'get',
                            url: `/parsingRecord/${this.addOrUpdateForm.id}`
                        }).then((response) => {
                            if (response && response.data.code === 200) {
                                this.addOrUpdateForm.serviceProvider = response.data.data.serviceProvider
                                this.addOrUpdateForm.serviceProviderId = response.data.data.serviceProviderId
                                this.addOrUpdateForm.serviceProviderSecret = response.data.data.serviceProviderSecret
                                this.addOrUpdateForm.recordType = response.data.data.recordType
                                this.addOrUpdateForm.getIpMode = response.data.data.getIpMode
                                this.addOrUpdateForm.getIpModeValue = response.data.data.getIpModeValue
                                this.addOrUpdateForm.ip = response.data.data.ip
                                this.addOrUpdateForm.domain = response.data.data.domain
                                this.addOrUpdateForm.state = response.data.data.state
                                this.addOrUpdateForm.updateFrequency = response.data.data.updateFrequency
                                this.addOrUpdateForm.createDate = response.data.data.createDate
                                this.addOrUpdateForm.updateDate = response.data.data.updateDate
                                this.addOrUpdateForm.creator = response.data.data.creator
                                this.addOrUpdateForm.updater = response.data.data.updater
                                this.handleChangeIpMode();
                                this.networks = this.addOrUpdateForm.ip;
                            } else {
                                this.$message.error(response.data.data)
                            }
                            this.dataListLoading = false
                        });
                    }
                })
            },
            // 表单提交
            addOrUpdateFormSubmit() {
                console.log(this.$refs['addOrUpdateForm'])
                //添加或更新 ip ipModeValue的值
                if (this.networks != undefined && this.networks != null && this.networks != '' && this.networkList.length > 0) {
                    this.addOrUpdateForm.ip = this.networks;
                    let obj = this.networkList.find(obj=>obj.value.includes(this.networks));
                    this.addOrUpdateForm.getIpModeValue = obj.label;
                    console.log(obj.label);
                }

                this.$refs['addOrUpdateForm'].validate((valid) => {
                    if (valid) {
                        this.dataListLoading = true
                        axios({
                            method: 'post',
                            url: `/parsingRecord/${!this.addOrUpdateForm.id ? 'add' : 'modify'}`,
                            data: {
                                'id': this.addOrUpdateForm.id || undefined,
                                'serviceProvider': this.addOrUpdateForm.serviceProvider,
                                'serviceProviderId': this.addOrUpdateForm.serviceProviderId,
                                'serviceProviderSecret': this.addOrUpdateForm.serviceProviderSecret,
                                'recordType': this.addOrUpdateForm.recordType,
                                'getIpMode': this.addOrUpdateForm.getIpMode,
                                'getIpModeValue': this.addOrUpdateForm.getIpModeValue,
                                'ip': this.addOrUpdateForm.ip,
                                'domain': this.addOrUpdateForm.domain,
                                'state': this.addOrUpdateForm.state,
                                'updateFrequency': this.addOrUpdateForm.updateFrequency
                            }
                        }).then((response) => {

                            console.log(response);

                            if (response && response.data.code === 200) {
                                this.$message({
                                    message: '操作成功',
                                    type: 'success',
                                    duration: 1500,
                                    onClose: () => {
                                        this.visible = false
                                        this.getDataList()
                                    }
                                })
                            } else {
                                this.$message.error(response.data.data)
                            }
                            this.dataListLoading = false
                        });
                    }
                })
            },


        }
    })
</script>
<style>
    body > .el-container {
        margin-bottom: 40px;
        height: 100%;
    }

    body, html {
        height: 99%;
    }

    .el-header, .el-footer {
        background-color: #B3C0D1;
        color: #333;
        text-align: -webkit-center;
        font-size: 26px;
        line-height: 60px;
    }

    .el-aside {
        background-color: #D3DCE6;
        color: #333;
        text-align: center;
        line-height: 25px;
        font-size: 10px;
    }

    .el-main {
        background-color: #E9EEF3;
        color: #333;
        text-align: center;
        line-height: 160px;
        margin: 0;
        padding: 0;
        box-sizing: border-box;
    }

    body > .el-container {
        margin-bottom: 40px;
    }

    .header-container {
        display: flex;
        justify-content: space-between;
    }

    .left-part {
        /* 左侧部分样式 */
    }

    .center-part {
        /* 中间部分样式 */
    }

    .right-part {
        /* 右侧部分样式 */
    }

    .left-part img,
    .right-part img {
        width: 100%; /* 图片宽度设置为 100% */
        height: 100%; /* 图片高度设置为 100% */
        object-fit: contain; /* 可以保持图片宽高比例不失真，但可能会留白 */
    }

    .el-container:nth-child(5) .el-aside,
    .el-container:nth-child(6) .el-aside {
        line-height: 260px;
    }

    .el-container:nth-child(7) .el-aside {
        line-height: 320px;
    }

    .console {
        background-color: black;
        color: white;
        font-family: monospace;
        overflow-y: scroll;
        height: 100%;
    }

    .output {
        display: flex;
        align-items: center;
        line-height: 1.2;
        padding: 0;
    }

    .timestamp {
        color: gray;
        margin-right: 8px;
    }

    .message {
        white-space: pre-wrap;
        word-wrap: break-word;
        line-height: 1.2;
        color: lime;
    }
</style>
</html>